<template>
  <div class="q-gutter-sm row items-center no-wrap q-electron-drag--exception">
    <q-input dense outlined v-model="search" style="min-width: 60px" input-class="text-right" class="q-ml-md">
      <template v-slot:append>
        <q-icon v-if="search === ''" name="search" />
        <q-icon v-else name="clear" class="cursor-pointer" @click="search = ''" />
      </template>
    </q-input>
    <q-btn round dense flat :icon="this.$q.fullscreen.isActive?'fullscreen_exit':'fullscreen'" v-if="$q.screen.gt.sm" @click="fullScreen">
      <q-tooltip v-if="!this.$q.fullscreen.isActive" content-class="bg-indigo" :offset="[15, 15]" content-style="font-size: 12px">{{ $t('index.fullscreen') }}</q-tooltip>
      <q-tooltip v-if="this.$q.fullscreen.isActive" content-class="bg-indigo" :offset="[15, 15]" content-style="font-size: 12px">{{ $t('index.exit_fullscreen') }}</q-tooltip>
    </q-btn>
    <q-btn round dense flat icon="translate" v-if="$q.screen.gt.sm">
      <q-tooltip content-class="bg-indigo" :offset="[15, 15]" content-style="font-size: 12px">
        {{ $t('index.translate') }}
      </q-tooltip>
      <q-menu>
        <q-list style="min-width: 100px">
          <q-item clickable v-close-popup v-for="(language, index) in langOptions" :key="index" @click="langChange(language.value)">
            <q-item-section>{{ language.label }}</q-item-section>
          </q-item>
        </q-list>
      </q-menu>
    </q-btn>
    <q-btn round dense flat icon="notifications">
      <q-badge color="red" text-color="" floating>
        2
      </q-badge>
      <q-tooltip content-class="bg-indigo" :offset="[15, 15]" content-style="font-size: 12px">{{$t('index.notice')}}</q-tooltip>
    </q-btn>
    <q-btn round flat>
      <q-menu>
        <div class="row no-wrap q-pa-md">

          <div class="column items-center">
            <q-avatar size="72px">
              <img :src="this.$PUBLIC_PATH + 'data/avatar.jpg'">
            </q-avatar>

            <div class="text-subtitle1 q-mt-md q-mb-xs">Hi！ CIMO</div>

            <q-btn color="primary" :label="$t('index.logout')" size="sm" v-close-popup @click="logout" />
          </div>
        </div>
      </q-menu>
      <q-avatar size="26px">
        <img :src="this.$PUBLIC_PATH + 'data/avatar.jpg'">
      </q-avatar>
      <q-tooltip content-class="bg-indigo" :offset="[15, 15]" content-style="font-size: 12px">{{$t('index.account')}}</q-tooltip>
    </q-btn>
    <div class="electron-only">
      <q-btn dense flat icon="minimize" @click="minimize" />
      <q-btn dense flat :icon="isMaximize?'crop_square':'flip_to_front'" @click="maximize" />
      <q-btn dense flat icon="close" @click="closeApp" />
    </div>
  </div>
</template>

<script>
import { LocalStorage } from 'quasar'

export default {
  name: 'ToolbarItemRight',
  data () {
    return {
      // 国际语言
      lang: this.$i18n.locale,
      search: '',
      mobileData: false,
      bluetooth: true,
      isMaximize: true,
      langOptions: [
        { value: 'en-us', label: 'English' },
        { value: 'zh-hans', label: '中文简体' },
        { value: 'zh-hant', label: '中文繁體' }
        // { value: 'ja', label: '日本語' }
      ]
    }
  },
  watch: {
    lang (lang) {
      var _this = this
      LocalStorage.set('lang', lang)
      console.log('lang', lang)
      _this.$i18n.locale = lang
    }
  },
  methods: {
    fullScreen () {
      if (this.$q.fullscreen.isActive) {
        // 退出全屏模式：
        this.$q.fullscreen.exit()
          .then(() => { // v1.5.0+
            // success!
          })
          // eslint-disable-next-line handle-callback-err
          .catch(err => { // v1.5.0+
            // oh, no!!!
          })
      } else {
        // 请求全屏模式：
        this.$q.fullscreen.request()
          .then(() => { // v1.5.0+
            // success!
          })
          // eslint-disable-next-line handle-callback-err
          .catch(err => { // v1.5.0+
            // oh, no!!!
          })
      }
    },

    logout () {
      this.$store.commit('LOGOUT')
      this.$router.push('/')
      window.sessionStorage.clear()
      if (process.env.MODE === 'electron') {
        this.$q.electron.remote.getCurrentWindow().setSize(500, 490)
        this.$q.electron.remote.getCurrentWindow().center()
      }
    },

    // electron
    minimize () {
      if (process.env.MODE === 'electron') {
        this.$q.electron.remote.BrowserWindow.getFocusedWindow().minimize()
      }
    },

    maximize () {
      if (process.env.MODE === 'electron') {
        const win = this.$q.electron.remote.BrowserWindow.getFocusedWindow()
        if (win.isMaximized()) {
          win.unmaximize()
          this.isMaximize = !this.isMaximize
        } else {
          win.maximize()
          this.isMaximize = !this.isMaximize
        }
      }
    },

    closeApp () {
      if (process.env.MODE === 'electron') {
        this.$q.electron.remote.BrowserWindow.getFocusedWindow().close()
      }
    },

    langChange (e) {
      var _this = this
      _this.lang = e
      window.setTimeout(() => {
        location.reload()
      }, 1)
    }
  }
}
</script>
